<!--
 * @Author: windys
 * @Description: 
 * @Date: 2022-02-18 13:48:58
-->
<template>
  <div class="editpwd">
    <van-nav-bar
      title="密码修改"
      left-text="返回"
      left-arrow
      @click-left="router.go(-1)"
    />
    <img src="@/assets/img/caihu.png" alt="" srcset="" />
    <van-form @submit="onSubmit" class="form_container">
      <van-cell-group inset>
        <van-field
          v-model="mobile"
          name="mobile"
          label="手机号"
          placeholder="请填写手机号"
          :rules="[{ required: true, message: '请填写手机号' }]"
          maxlength="11"
        />
        <van-field
          v-model="checkCode"
          center
          clearable
          label="短信验证码"
          placeholder="短信验证码"
          name="checkCode"
          maxlength="6"
          :rules="[{ required: true, message: '请填写验证码' }]"
        >
          <template #button>
            <van-button size="small" type="primary" round @click="handleCode">{{
              btn
            }}</van-button>
          </template>
        </van-field>
        <van-field
          v-model="newPassword"
          clearable
          type="password"
          name="newPassword"
          label="新密码"
          placeholder="新密码"
          maxlength="20"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
      </van-cell-group>
      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit">
          确认修改
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script >
import { defineComponent, ref } from "vue";
import { useRouter } from "vue-router";
import { changePswd, getCode } from "@/api/login";
import { Notify } from "vant";
import { encruption } from "@/utils/index";

export default defineComponent({
  setup() {
    const router = useRouter();

    const mobile = ref("");
    const checkCode = ref("");
    const newPassword = ref("");
    const btn = ref("发送验证码");

    const handleCode =  async() => {
      if (!mobile.value) {
        Notify({ type: "danger", message: "输入手机号" });
        return;
      }
      if(btn.value != "发送验证码"){
          return
      }
      var num = 10;
      const timer = setInterval(() => {
        if (num <= 0) {
          btn.value = "发送验证码";
          clearInterval(timer);
        } else {
          num--;
          btn.value = `${num}s后获取`;
        }
      }, 1000);
      const res = await getCode({
        mobile: mobile.value,
        type: 2,
      });
    };
    const onSubmit = async(values) => {
      values.newPassword = encruption(values.newPassword)
      const res  = await changePswd(values)
      if(!res){
        Notify({type:'success',message:'修改密码成功'})
      }
    };
    return {
      btn,
      router,
      mobile,
      newPassword,
      checkCode,
      onSubmit,
      handleCode,
    };
  },
});
</script>




<style lang="scss" scoped>
.editpwd {
  text-align: center;
}
img {
  width: 50px;
  height: 50px;
  margin: 0 auto;
  margin-top: 50px;
}
.form_container {
  width: 90%;
  margin: 0 auto;
  margin-top: 20px;
}
</style>